import { createRouter, createWebHistory } from 'vue-router'
import Recommend from '@/views/Recommend/Index'
const Rank = () => import(/* webpackChunkName: "rank" */ '@/views/Rank/Index')
const Singer = () =>
  import(/* webpackChunkName: "singer" */ '@/views/Singer/Index')
const SingerDetail = () =>
  import(/* webpackChunkName: "singerDetail" */ '@/views/SingerDetail/Index')
const Album = () =>
  import(/* webpackChunkName: "Album" */ '@/views/Album/Album')
const RankDetail = () =>
  import(/* webpackChunkName: "RankDetail" */ '@/views/RankDetail/RankDetail')
const Search = () =>
  import(/* webpackChunkName: "Search" */ '@/views/Search/Search')

const routes = [
  {
    path: '/',
    redirect: '/recommend'
  },
  {
    path: '/recommend',
    name: 'Recommend',
    component: Recommend,
    children: [
      {
        path: '/recommend/:id',
        name: 'Album',
        component: Album
      }
    ]
  },
  {
    path: '/rank',
    name: 'Rank',
    component: Rank,
    children: [
      {
        path: '/rank/:id',
        name: 'RankDetail',
        component: RankDetail
      }
    ]
  },
  {
    path: '/singer',
    name: 'Singer',
    component: Singer,
    children: [
      {
        path: ':id',
        name: 'SingerDetail',
        component: SingerDetail
      }
    ]
  },
  {
    path: '/search',
    name: 'Search',
    component: Search
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
